<h1 id="tableLabel">Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>
@if (!forecasts?.length) {
<p><em>Loading...</em></p>
}
@else{
<table class='table table-striped' aria-labelledby="tableLabel">
  <thead>
    <tr>
      <th>Date</th>
      <th>Temp. (C)</th>
      <th>Temp. (F)</th>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    @for (forecast of forecasts; track $index) {
    <tr>
      <td>{{ forecast.date | date }}</td>
      <td>{{ forecast.temperatureC }}</td>
      <td>{{ forecast.temperatureF }}</td>
      <td>{{ forecast.summary }}</td>
    </tr>
    }
  </tbody>
</table>
}